<template>
  <div class="m-4 mr-0 overflow-hidden bg-white">
    <BasicTree title="部门列表" search treeWrapperClassName="h-[calc(100%-35px)] overflow-auto" ref="treeRef"
      :clickRowToExpand="false" :treeData="treeData" :fieldNames="{ key: 'id', title: 'deptName' }"
      @select="handleSelect" />
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, unref } from 'vue';
import { BasicTree, TreeActionType } from '/@/components/Tree';
import { getOrgTree } from '/@/api/system/dept';

const emit = defineEmits(['select'])
const treeData = ref<any[]>([]);
const treeRef = ref<Nullable<TreeActionType>>(null);

onMounted(async () => {
  await fetch();
  getTree().expandAll(true);
})

function getTree() {
  const tree = unref(treeRef);
  if (!tree) {
    throw new Error('tree is null!');
  }
  return tree;
}
async function fetch() {
  treeData.value = (await getOrgTree()) as any;

}

function handleSelect(keys: any[]) {
  emit('select', keys[0]);
}

</script>
